
<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 50px; display: flex;">
      <div style="width: 220px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b;">
        <img style="width: 40px; height: 40px; border-radius: 50%" src="@/assets/images/ja.png">
        <span style="font-size: 20px; font-weight: bold; color: #f3ecec; margin-left: 5px">实战项目</span>
      </div>
       <div style="flex: 1;display: flex; align-items:center; padding-left: 20px; border-bottom: 1px solid #ddd;">
         首页\数据分析
       </div>
       <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center;border-bottom: 1px solid #ddd;">
         <el-dropdown>
           <div style="display: flex; align-items: center;">
             <img style="width: 40px; height: 40px; border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
             <span style="margin-left: 5px">{{ data.user?.name }}</span>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>个人信息</el-dropdown-item>
               <el-dropdown-item>修改密码</el-dropdown-item>
               <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>

    </div>
    <!-- 头部区域结束 -->

    <!-- 下方区域开始 -->
    <div style="display: flex">
      <!-- 菜单区域开始 -->
      <div style="width: 220px; box-shadow: 0 0 8px rgba(0, 0, 0, .12);">
        <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style="height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>数据管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>

          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 菜单区域结束 -->

      <!-- 数据渲染区域开始 -->
      <div style="flex: 1;width: 0; padding: 10px;background-color: #f2f4ff">
        <RouterView />
      </div>
      <!-- 数据渲染区域结束 -->
    </div>
    <!-- 下方区域结束 -->
  </div>
</template>




<script setup>
import router from "@/router/index.js";
import { reactive} from "vue";

const data = reactive( {
  user: JSON.parse(localStorage.getItem('code_user') || "{}")
})

const logout = () => {
  localStorage.removeItem('code_user'); // 移除本地存储的用户信息
  location.href = '/login'; // 跳转至登录页
};

if (!data.user.id) {
  router.push("/login");
}

</script>

<style>

.el-menu {
  background-color: #3a456b;
  border: none;
}
/* 选择.el-sub-menu__title 类元素，设置文字颜色为 #ddd */
.el-sub-menu__title {
  background-color: #3a456b;
  color: #ddd;
}

/* 选择.el-menu-item 类元素，设置高度为 50px，文字颜色为 #ddd */
.el-menu-item {
  height: 50px;
  color: #ddd;
}

/* 选择.el-menu 下的.is-active 类元素，设置激活状态的背景色为 #537bee，文字颜色为白色 */
.el-menu .is-active {
  background-color: #537bee;
  color: #fff;
}

/* 选择.el-sub-menu__title 类元素，鼠标悬停时设置背景色为 #3a456b */
.el-sub-menu__title:hover {
  background-color: #3a456b;
}

/* 选择非激活状态（not(.is-active)）的.el-menu-item 类元素，鼠标悬停时设置背景色为 #7a9fff，文字颜色为 #333 */
.el-menu-item:not(.is-active):hover {
  background-color: #7a9fff;
  color: #333;
}
/*管理员
/* 针对 .el-dropdown 类元素，设置鼠标悬停样式为指针（pointer），表示该元素可交互 */
.el-dropdown {
  cursor: pointer;
}
/*管理员
/* 针对 .el-tooltip__trigger 类元素，移除默认的外轮廓（outline），常用于消除元素聚焦时的边框线，提升视觉整洁度 */
.el-tooltip__trigger {
  outline: none;
}
/* 定义 .card 类样式，通常用于实现卡片式布局的视觉效果 */
.card {
  /* 设置卡片背景颜色为白色，作为内容展示的基础底色 */
  background-color: white;
  /* 为卡片内部添加 10px 内边距，使内部内容与卡片边框保持间距，避免内容紧贴边缘 */
  padding: 10px;
  /* 将卡片的四个边角设置为 5px 圆角半径，让卡片外观更圆润、友好 */
  border-radius: 5px;
  /* 为卡片添加外阴影，0 水平偏移、0 垂直偏移、8px 模糊半径，阴影颜色为黑色且透明度 0.12，营造卡片悬浮的立体感 */
  box-shadow: 0 0 8px rgba(0, 0, 0, .12);
}
/* 针对类名为 el-menu-inline 的行内菜单中的 el-menu-item 菜单项 */
.el-menu-inline .el-menu-item {
  /* 设置左内边距为 48px，调整菜单项内容的左侧缩进距离，使布局更符合设计需求 */
  padding-left: 48px;
}
/* !important 提升样式优先级*/
</style>